<template>
  <a-modal
    :title="form && form.id ? '修改机构' : '新建机构'"
    centered
    :visible="visible"
    :confirmLoading="loading"
    destroyOnClose
    @ok="handleOk"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form-model ref="ruleForm" :model="form"
                    :rules="rules" v-bind="formLayout" labelAlign="left">
        <a-form-model-item ref="parent_id" label="父级机构" prop="parent_id">
          <a-tree-select
            :disabled="disabled"
            placeholder="请选择父级机构"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :replaceFields="{children:'children', title:'name', key:'id', value: 'id' }"
            v-model="form.parent_id"
            :tree-data="treeData"
            tree-default-expand-all
          />
        </a-form-model-item>
        <a-form-model-item ref="name" label="名称" prop="name">
          <a-input :disabled="disabled" v-model="form.name"/>
        </a-form-model-item>
        <a-form-model-item ref="tag" label="机构编码" prop="code">
          <a-input :disabled="disabled" v-model="form.code"/>
        </a-form-model-item>
        <a-form-model-item ref="sort" label="排序" prop="sort">
          <a-input :disabled="disabled" v-model="form.sort"/>
        </a-form-model-item>
        <a-form-model-item ref="status" label="启用/停用" prop="status">
          <a-select :disabled="disabled" v-model="form.status">
            <a-select-option value="0">
              启用
            </a-select-option>
            <a-select-option value="1">
              停用
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { getList } from '@/api/dept'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 19}
      }
    }
    return {
      treeData: [],
      form: {
        id: undefined,
        parent_id: undefined,
        name: undefined,
        code: undefined,
        sort: undefined,
        status: "0",
      },
      disabled: false,
      rules: {
        name: [
          { required: true, message: '请输入机构名称', trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    this.$watch('model', () => {
      this.disabled = this.model.disabled
      this.form = {
        ...this.form,
        ...this.model
      };
    })
    this.$watch('visible', (e) => {
      if (e) {
        this.getMenuList()
      }
    })
  },
  methods: {
    handleOk() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$emit('ok', this.form)
        } else {
          return false;
        }
      });
    },
    getMenuList() {
      getList().then(ret => {
        this.treeData = ret.data
      })
    },
    resetFields() {
      this.$refs.ruleForm.resetFields();
      this.form = {
        id: undefined,
        parent_id: undefined,
        name: undefined,
        code: undefined,
        sort: undefined,
        status: "0",
      };
    },
  }
}
</script>
